<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MyStack.Models.StoryView>" %>

<asp:Content ID="Content4" ContentPlaceHolderID="HeadContentStoryView" runat="server">
    <style type="text/css">
        #avatar
        {
            float: left;
            width: 100px;
            height: 100%;
        }
        #story-info
        {
            padding: 0 0 0 20px;
            margin: 0 0 0 100px;
            font-weight: bold;
            font-size: 1.5em;
            color: #848a73;
        }
        #title
        {
            font-size: 2.2em;
            color: #7a7368;
            font-weight: 900;
        }
        #story-info a
        {
            color: #75bce7;
        }
        #story-content
        {
            color: #848a73;
            padding: 30px 0 0 0;
            font-size: 1.5em; /*          
            Do minimal content styling
            since the users can now input
            rich content, e.g. don't override
            thier styles
*/
        }
        #history a
        {
            font-weight: bold;
            font-size: 1.5em;
            color: #75bce7;
        }
        #avatar
        {
        	/*display:table-cell; 
            text-align:center;      	
            vertical-align:middle;
            line-height:98px;*/
        }
        #storyViewAvatar
        {
        	 visibility:hidden;
        	/*vertical-align:middle;*/
        }
        #story-content img
        {
        	padding: 5px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    View
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <fieldset>
        <div style="padding-top:20px;">
        <div id="avatar" style="background-color:Black; height: 100px; width: 100px">
            <!-- This is how you display a user avatar, the height is arbitrary -->
            <img alt="avatar" id="storyViewAvatar" src='<%= Url.Action("Show", "Image", new { id=Model.AuthorId }) %>' 
            onload="imageResize(100, 'storyViewAvatar');"/>
        </div>
        <div id="story-info">
            <div id="title">
                <%= Html.Encode(Model.Title) %>
            </div>
            written by
            <%= Html.ActionLink(Model.Author, "Current", "Stack", new { id = Model.AuthorId }, null)%><br />
            currently residing on
            <%= Html.ActionLink(Model.Owner, "Current", "Stack", new { id = Model.OwnerId }, null)%>'s stack
        </div>
        </div>
        <div class="clear">
        </div>
        <div id="story-content">
            <%= Model.Content %>
        </div>
    </fieldset>
    <p>
        <%--
        <%=Html.ActionLink("Edit", "Edit", new { /* id=Model.PrimaryKey */ }) %> |
        <%=Html.ActionLink("Back to List", "Index") %>
        --%>
    </p>
    <div id="history">
        <%= Html.ActionLink("History", "History", new { id = Model.StoryId })%>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
